{extend name="./tpl/default/mobile/public/layout.html" /}
{block name="header"}
<link rel="stylesheet" href="/public/home/mobile/css/member/set.css">
<link rel="stylesheet" href="/public/plugins/dropload/dropload.css">
{/block}
{block name="head"}
<div class="am-g" style="font-size:20px;">
    <div class="am-u-sm-5">
        <a onclick="history.back(-1)"><span class="icon iconfont icon-xiangzuojiantou"></span></a>
    </div>
    <div class="am-u-sm-6" style="margin-right: 30px;">
        优惠券
    </div>
</div>
<hr style="border:1px solid #e0e0e0;margin: 0px;">
{/block}
{block name="body"}
<div data-am-widget="tabs"
     class="am-tabs am-tabs-default">
    <ul class="am-tabs-nav am-cf">
        <li class="am-active" onclick="setOrder('unused',this)">可用优惠卷</li>
        <li class="" onclick="setOrder('expire',this)">已用优惠卷</li>
        <li class="" onclick="setOrder('used',this)">过期优惠卷</li>
    </ul>
    <div class="am-tabs-bd">
        <div data-tab-panel-0 class="am-tab-panel am-active" id="list">


        </div>
    </div>
</div>
{/block}
{block name="script"}
<script src="/public/plugins/dropload/dropload.js"></script>
<script src="/public/plugins/template/template.js"></script>
<script type="text/html" id="list-tpl">
    {{each data as value index}}
    <div class="am-g" style="margin-top: 20px;">
        <div class="am-u-sm-4">
            <img src="{{ value.card_image}}" style="width:100px;height: 50px;" alt="">
        </div>
        <div class="am-u-sm-6">
            <div class="am-g">
                <div class="am-u-sm-12" style="font-size: 14px;">
                    {{ value.title}}
                </div>
                <div class="am-u-sm-12">
                    <b style="color: #c30d23">{{ value.direction}}</b>
                </div>
            </div>

        </div>
        <div class="am-u-sm-2" style="margin-top: 10px;">
            <span class="icon iconfont icon-duihao"></span>
        </div>
    </div>
    {{/each}}
</script>
<script>
    $(".aqdf").click(function () {
        $(this).addClass("active").siblings().removeClass("active");
    });
    var data = {
        page: 0,
        type: 'unused'//unused未使用且可用 expire未使用已过期 used已使用
    };

    var drop = $('#page').dropload({  //定义检测的容器
        scrollArea: window,
        loadDownFn: function (me) {		//loadDownFn是检测是否加载下方，其余方向请到文档中查看
            data.page++;			//每次都需要将页码加1
            // 拼接HTML
            $.ajax({
                type: 'POST',
                url: '{:url("/home/User/coupon")}', data: data, success: function (datas) {
                    if (datas.code == 0) {
                        layer.open({
                            content: datas.msg
                            , skin: 'msg'
                            , time: 2 //2秒后自动关闭
                        });
                        // 锁定
                        me.lock();
                        // 无数据
                        me.noData();
                    }
                    var html = template('list-tpl', datas);		//此处使用的是上章节介绍的模板引擎
                    $('#list').append(html);		//将生成好的html插入放置列表的容器内
                    if (data.page >= datas.last_page) {		//检测是否加载到最后一页
                        // 锁定
                        me.lock();
                        // 无数据
                        me.noData();
                    }
                    me.resetload();			//这句必须写
                }
            });

        }
    });

    function setOrder(type, obj) {
        data.page = 0;
        data.type = type;
        $('#list').empty();
        drop.unlock();
        drop.noData(false);
        drop.resetload();
    }
</script>
{/block}
